<template>
	<view class="container">
		<view class="top" :style="{ backgroundImage: 'url(' + hbbj + ')' }">
			<text @click="qpt" :class="[currentTab == 0 ? 'hb' : '']">企业支付</text>
			<text @click="bkn" :class="[currentTab == 1 ? 'hb' : '']">团队支付</text>
		</view>
		<view v-if="currentTab == 0" class="two">
			<u-form class="bknhb" :model="model" :rules="rules" ref="uForm" :errorType="errorType">
				<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition" label="项目名称：" prop="qyxz">
					<u-input type="select" :select-open="selectShowPpsx" v-model="model.ppsx" placeholder="请选择" placeholderStyle="color: #0D1D36;"
					 input-align="right" @click="selectShowPpsx = true"></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition" label="合同金额：" prop="qyxz">
					<u-input :border="border" placeholder="请输入金额(万元)" v-model="model.gjz" type="text" input-align="right"></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30" :label-width="250" :label-position="labelPosition" label="合同状态：" prop="qyxz">
					<u-checkbox-group @change="checkboxGroupChange" :width="radioCheckWidth" :wrap="radioCheckWrap">
						<u-checkbox v-model="item.checked" v-for="(item, index) in checkboxList" :key="index" :name="item.name">{{ item.name }}</u-checkbox>
					</u-checkbox-group>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" :label-width="350" :label-position="labelPosition" label="支付类型：" prop="qyxz">
					<u-checkbox v-model="item.checked" v-for="(item, index) in checkboxList1" :key="index" :name="item.name">{{ item.name }}</u-checkbox>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition" label="支付金额：" prop="qyxz">
					<u-input :border="border" placeholder="请输入金额(万元)" v-model="model.gjz" type="text" input-align="right"></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition" label="支付比例：" prop="qyxz">
					<u-input :border="border" placeholder="请输入比例(%)" v-model="model.gjz" type="text" input-align="right"></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition" label="支付次数：" prop="qyxz">
					<u-input :border="border" placeholder="次" v-model="model.gjz" type="text" input-align="right"></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition" label="平台佣金：" prop="qyxz">
					<u-input :border="border" placeholder="次" v-model="model.gjz" type="text" input-align="right"></u-input>
				</u-form-item>
				<!-- 	<u-gap :bg-color="bgColor" :height="height"></u-gap> -->
			</u-form>

			<view class="gzxd u-p-t-30 u-p-l-30 u-m-t-30">
				<u-input type="textarea" :border="border" placeholder="请输入您的祝福语吧！" v-model="model.zwpj" />
			</view>
			<view class="u-flex u-row-center u-m-t-50">
				<view class="tuoyuan"></view>
				<view class="tuoyuantwo"></view>
				<view class="zfjl u-m-l-10 u-m-r-10">支付记录</view>
				<view class="tuoyuantwo"></view>
				<view class="tuoyuan"></view>
			</view>

			<view class="u-flex u-m-t-35">
				<view class="ty">
				</view>
				<text class="xmjz u-m-l-20">第1次支付</text>
				<text class="sctime u-m-l-20">2020-06-01 16:24:18</text>
			</view>

			<view class="u-flex u-row-start">
				<view class="xx">
				</view>
				<view class="project u-m-l-40 u-p-30">
					<view class="u-flex u-row-between u-m-b-30">
						<view>支付类型</view>
						<view class="xmjz">工程</view>
					</view>
					<view class="u-flex u-row-between u-m-b-30">
						<view>支付金额</view>
						<view class="xmjz">200万元</view>
					</view>
					<view class="u-flex u-row-between u-m-b-30">
						<view>支付比例</view>
						<view class="xmjz">10%</view>
					</view>
					<view class="u-flex u-row-between u-border-bottom u-p-b-20">
						<view>平台佣金</view>
						<view class="xmjz">1万元</view>
					</view>
					<view class="u-m-t-20 sctime">
						支付说明，支付说明，支付说明，支付说明，支付说明，支付说明，支付说明，支付说明，支付说明，支付说明，
					</view>
				</view>
			</view>

			<view class="u-flex">
				<view class="ty">
				</view>
				<text class="xmjz u-m-l-20">第2次支付</text>
				<text class="sctime u-m-l-20">2020-06-01 16:24:18</text>
			</view>
			<view class="u-flex u-row-start">
				<view class="xx">
				</view>
				<view class="project u-m-l-40 u-p-30">
					<view class="u-flex u-row-between u-m-b-30">
						<view>支付类型</view>
						<view class="xmjz">工程</view>
					</view>
					<view class="u-flex u-row-between u-m-b-30">
						<view>支付金额</view>
						<view class="xmjz">200万元</view>
					</view>
					<view class="u-flex u-row-between u-m-b-30">
						<view>支付比例</view>
						<view class="xmjz">10%</view>
					</view>
					<view class="u-flex u-row-between u-border-bottom u-p-b-20">
						<view>平台佣金</view>
						<view class="xmjz">1万元</view>
					</view>
					<view class="u-m-t-20 sctime">
						支付说明，支付说明，支付说明，支付说明，支付说明，支付说明，支付说明，支付说明，支付说明，支付说明，
					</view>
				</view>
			</view>

			<view class="u-flex">
				<view class="ty">
				</view>
				<text class="xmjz u-m-l-20">第3次支付</text>
				<text class="sctime u-m-l-20">2020-06-01 16:24:18</text>
			</view>
			<view class="u-flex u-row-start">
				<view class="xx">
				</view>
				<view class="project u-m-l-40 u-p-30">
					<view class="u-flex u-row-between u-m-b-30">
						<view>支付类型</view>
						<view class="xmjz">工程</view>
					</view>
					<view class="u-flex u-row-between u-m-b-30">
						<view>支付金额</view>
						<view class="xmjz">200万元</view>
					</view>
					<view class="u-flex u-row-between u-m-b-30">
						<view>支付比例</view>
						<view class="xmjz">10%</view>
					</view>
					<view class="u-flex u-row-between u-border-bottom u-p-b-20">
						<view>平台佣金</view>
						<view class="xmjz">1万元</view>
					</view>
					<view class="u-m-t-20 sctime">
						支付说明，支付说明，支付说明，支付说明，支付说明，支付说明，支付说明，支付说明，支付说明，支付说明，
					</view>
				</view>
			</view>


			<u-button class="button">提交</u-button>
		</view>
	
<view v-if="currentTab == 1" class="two">
			<u-form class="bknhb" :model="model" :rules="rules" ref="uForm" :errorType="errorType">
				<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition" label="项目名称：" prop="qyxz">
					<u-input type="select" :select-open="selectShowPpsx" v-model="model.ppsx" placeholder="请选择" placeholderStyle="color: #0D1D36;"
					 input-align="right" @click="selectShowPpsx = true"></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition" label="合同金额：" prop="qyxz">
					<u-input :border="border" placeholder="请输入金额(万元)" v-model="model.gjz" type="text" input-align="right"></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30" :label-width="250" :label-position="labelPosition" label="合同状态：" prop="qyxz">
					<u-checkbox-group @change="checkboxGroupChange" :width="radioCheckWidth" :wrap="radioCheckWrap">
						<u-checkbox v-model="item.checked" v-for="(item, index) in checkboxList" :key="index" :name="item.name">{{ item.name }}</u-checkbox>
					</u-checkbox-group>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" :label-width="350" :label-position="labelPosition" label="支付类型：" prop="qyxz">
					<u-checkbox v-model="item.checked" v-for="(item, index) in checkboxList1" :key="index" :name="item.name">{{ item.name }}</u-checkbox>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition" label="支付金额：" prop="qyxz">
					<u-input :border="border" placeholder="请输入金额(万元)" v-model="model.gjz" type="text" input-align="right"></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition" label="支付比例：" prop="qyxz">
					<u-input :border="border" placeholder="请输入比例(%)" v-model="model.gjz" type="text" input-align="right"></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition" label="支付次数：" prop="qyxz">
					<u-input :border="border" placeholder="次" v-model="model.gjz" type="text" input-align="right"></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition" label="平台佣金：" prop="qyxz">
					<u-input :border="border" placeholder="次" v-model="model.gjz" type="text" input-align="right"></u-input>
				</u-form-item>
				<!-- 	<u-gap :bg-color="bgColor" :height="height"></u-gap> -->
			</u-form>

			<view class="gzxd u-p-t-30 u-p-l-30 u-m-t-30">
				<u-input type="textarea" :border="border" placeholder="请输入支付补充说明" v-model="model.zwpj" />
			</view>
			<view class="u-flex u-row-center u-m-t-50">
				<view class="tuoyuan"></view>
				<view class="tuoyuantwo"></view>
				<view class="zfjl u-m-l-10 u-m-r-10">团员记录</view>
				<view class="tuoyuantwo"></view>
				<view class="tuoyuan"></view>
			</view>
			<view class="projectty u-m-t-30 u-p-40">
			
				<view class="picture" v-for="(item,index) in 3" :key="index">
					<view class="u-flex u-row-start">
									<image src="../../static/homepage/tdmckk.png" mode=""></image>
									<view class="u-m-l-30 u-p-b-30">
									<view class="tuanzhang">
										团长
									</view>
									<view class="wanyuan u-p-t-10">
										50万元
									</view>
									</view>
									</view>
								</view>
								
								<view class="picture" v-for="(item,index) in 3" :key="index">
									<view class="u-flex u-row-start">
													<image src="../../static/homepage/tdmckk.png" mode=""></image>
													<view class="u-m-l-30 u-p-b-30">
													<view class="tuanzhang">
														团长
													</view>
													<view class="wanyuan u-p-t-10">
														50万元
													</view>
													</view>
													</view>
												</view>
				</view>
	
			
			<view class="u-flex u-row-center u-m-t-50">
				<view class="tuoyuan"></view>
				<view class="tuoyuantwo"></view>
				<view class="zfjl u-m-l-10 u-m-r-10">支付记录</view>
				<view class="tuoyuantwo"></view>
				<view class="tuoyuan"></view>
			</view>

			<view class="u-flex u-m-t-35">
				<view class="ty">
				</view>
				<text class="xmjz u-m-l-20">第1次支付</text>
				<text class="sctime u-m-l-20">2020-06-01 16:24:18</text>
			</view>

			<view class="u-flex u-row-start">
				<view class="xx">
				</view>
				<view class="project u-m-l-40 u-p-30">
					<view class="u-flex u-row-between u-m-b-30">
						<view>支付类型</view>
						<view class="xmjz">工程</view>
					</view>
					<view class="u-flex u-row-between u-m-b-30">
						<view>支付金额</view>
						<view class="xmjz">200万元</view>
					</view>
					<view class="u-flex u-row-between u-m-b-30">
						<view>支付比例</view>
						<view class="xmjz">10%</view>
					</view>
					<view class="u-flex u-row-between u-border-bottom u-p-b-20">
						<view>平台佣金</view>
						<view class="xmjz">1万元</view>
					</view>
					<view class="u-m-t-20 u-p-b-20 sctime">
						支付说明，支付说明，支付说明，支付说明，支付说明，支付说明，支付说明，支付说明，支付说明，支付说明，
					</view>
				</view>
			</view>

			<view class="u-flex">
				<view class="ty">
				</view>
				<text class="xmjz u-m-l-20">第2次支付</text>
				<text class="sctime u-m-l-20">2020-06-01 16:24:18</text>
			</view>
			<view class="u-flex u-row-start">
				<view class="xx">
				</view>
				<view class="project u-m-l-40 u-p-30">
					<view class="u-flex u-row-between u-m-b-30">
						<view>支付类型</view>
						<view class="xmjz">工程</view>
					</view>
					<view class="u-flex u-row-between u-m-b-30">
						<view>支付金额</view>
						<view class="xmjz">200万元</view>
					</view>
					<view class="u-flex u-row-between u-m-b-30">
						<view>支付比例</view>
						<view class="xmjz">10%</view>
					</view>
					<view class="u-flex u-row-between u-border-bottom u-p-b-20">
						<view>平台佣金</view>
						<view class="xmjz">1万元</view>
					</view>
					<view class="u-m-t-20 sctime">
						支付说明，支付说明，支付说明，支付说明，支付说明，支付说明，支付说明，支付说明，支付说明，支付说明，
					</view>
				</view>
			</view>

			<view class="u-flex">
				<view class="ty">
				</view>
				<text class="xmjz u-m-l-20">第3次支付</text>
				<text class="sctime u-m-l-20">2020-06-01 16:24:18</text>
			</view>
			<view class="u-flex u-row-start">
				<view class="xx">
				</view>
				<view class="project u-m-l-40 u-p-30">
					<view class="u-flex u-row-between u-m-b-30">
						<view>支付类型</view>
						<view class="xmjz">工程</view>
					</view>
					<view class="u-flex u-row-between u-m-b-30">
						<view>支付金额</view>
						<view class="xmjz">200万元</view>
					</view>
					<view class="u-flex u-row-between u-m-b-30">
						<view>支付比例</view>
						<view class="xmjz">10%</view>
					</view>
					<view class="u-flex u-row-between u-border-bottom u-p-b-20">
						<view>平台佣金</view>
						<view class="xmjz">1万元</view>
					</view>
					<view class="u-m-t-20 sctime">
						支付说明，支付说明，支付说明，支付说明，支付说明，支付说明，支付说明，支付说明，支付说明，支付说明，
					</view>
				</view>
			</view>


			<u-button class="button">提交</u-button>
		</view>
	

		<view class="u-m-t-20 u-p-30">
			<!--弹出框-->
			<u-select mode="single-column" :list="selectList" v-model="selectShowQyxz" @confirm="selectConfirmQyxz"></u-select>

			<!--弹出框-->
		</view>

	</view>
</template>

<script>
	export default {

		data() {
			return {
				height: 20,
				bgColor: this.$u.color.bgColor,
				marginTop: 50,
				marginBottom: 30,
				hbbj: "../../static/img/fbdt.png",
				currentTab: 0,
				model: {
					ws: '',
					wxy: '',
					wyx: '',
					qymc: '',
					zyp: '',
					money: "",
				},
				checkboxList: [{
						name: '正常',
						checked: false,
						disabled: false
					},
					{
						name: '暂停',
						checked: false,
						disabled: false
					},
					{
						name: '完成',
						checked: true,
						disabled: false
					},
				],
				selectList: [{
						value: '测试1',
						label: '测试1'
					},
					{
						value: '测试2',
						label: '测试2'
					},
					{
						value: '测试3',
						label: '测试3'
					}
				],
				checkboxList1: [{
						name: '代管',
						checked: false,
						disabled: false
					},
					{
						name: '工程',
						checked: true,
						disabled: false
					},

				],

				rules: {
					zyp: [{
						required: false,
						message: '请选择招/应聘',
						trigger: 'change'
					}],

					ws: [{
						required: false,
						message: '请选择我是',
						trigger: 'change'
					}],
					wxy: [{
						required: false,
						message: '请选择我需要',
						trigger: 'change'
					}],
					wyx: [{
						required: false,
						message: '请选择我意向',
						trigger: 'change'
					}]
				},
				required: false,
				border: false,
				check: false,
				selectStatus: 'close',
				selectShowZyp: false,
				selectShowWs: false,
				selectShowWxy: false,
				selectShowWyx: false,
				selectShowQyxz: false,
				selectShowQylx: false,
				selectShowQydy: false,
				selectShowLyxy: false,
				labelPosition: 'left',
				codeTips: '',
				errorType: ['toast'],
			}
		},
		methods: {
			qpt() {
				this.currentTab = 0;
			},
			bkn() {
				this.currentTab = 1;
			}
		},

	}
</script>

<style scoped lang="scss">
	page {
		background-color: #F4F4F4;

	}
	.two{
		margin: 0 auto;
		width: 90%;
	}
.projectty{
	// border: 1px solid;
	width: 100%;
	height: 470rpx;
	margin: 0 auto;
	background: #FFFFFF;
	border-radius: 20rpx;
	background-image: url(../../static/img/chengyuan.png);
	background-repeat: no-repeat;
				background-size: 60% auto;
				background-position: 50px 30px;

}
.picture{
	float: left;
	margin-right: 80rpx;
}
.picture image{
	width: 100rpx;
	height: 111rpx;
	margin-bottom: 30rpx;
}
.tuanzhang{
	
font-size: 32rpx;
color: #0D1D36;
}
.wanyuan{
	
color: #AB61FF;
}
	.tuoyuan {
		width: 10rpx;
		height: 10rpx;
		background: #4B9CFF;
		opacity: 0.6;
		border-radius: 50%;
	}

	.tuoyuantwo {
		width: 14rpx;
		height: 14rpx;
		background: #4B9CFF;
		border-radius: 50%;

	}

	.ty {
		width: 18rpx;
		height: 18rpx;
		background: #ffffff;
		border-radius: 50%;
		border: 2rpx solid #4B9CFF;
		;
	}

	.xx {
		width: 2rpx;
		height: 500rpx;
		border: 2rpx dashed #888D99;
		opacity: 0.5;
		margin-left: 7rpx;
		margin-top: -10rpx;
	}

	.project {
		width: 100%;
		height: 432rpx;
		background: #FFFFFF;
		border-radius: 20rpx;



	}

	.xmjz {
		color: #4B9CFF;
		font-size: 30rpx;

	}

	.sctime {
		display: flex;
		align-items: center;
		color: #888D99;
		font-size: 30rpx;
		// margin-left: 20rpx;
	}

	.zfjl {

		font-size: 36rpx;
		color: #4B9CFF;
	}

	.gzxd {
		background: white;
		height: 200rpx;
		border-radius: 30rpx;
		width: 100%;
		margin: 0 auto;
		
	}


	.sbdj {
		height: 450rpx;
	}

	.top {
		background-repeat: no-repeat;
		background-size: 100% 500rpx;
		background-position: 0 -20px;
		display: flex;
		justify-content: space-around;
		padding: 58rpx 30rpx 450rpx 30rpx;

		text {
			display: block;
			width: 226rpx;
			height: 60rpx;
			line-height: 60rpx;
			color: #FFFFFF;
			font-size: 28rpx;
			text-align: center;
		}

		.hb {
			background: #FFFFFF;
			border-radius: 30rpx;
			color: #AB62FF;
		}

	}

	.btnall {
		width: 750rpx;
		height: 100rpx;
		background: #FFFFFF;
		position: fixed;
		// padding-top: 100px;
		bottom: 0;
	}

	.btnaccept {
		width: 270rpx;
		height: 64rpx;
		background: #4C9CFF;
		border-radius: 40upx;
		line-height: 64rpx;
		text-align: center;
		color: #fff;
		font-size: 26rpx;
	}

	.btngoutou {
		width: 270rpx;
		height: 64rpx;
		background-color: #6ADE7E;
		border-radius: 40upx;
		line-height: 64rpx;
		text-align: center;
		color: #fff;

		font-size: 26rpx;

	}

	.zwpj {
		width: 670rpx;
		height: 193rpx;
		background: #F5F5F9;
		border-radius: 20rpx;
		margin: 0 auto;

	}

	.bknhb {
		margin-top: -400rpx;
		// width: 710rpx;
		height: 1000rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
	}

	.button {
		width: 662rpx;
		height: 80rpx;
		font-size: 32rpx;
		margin: 124rpx auto 95rpx auto;
		background: #ab61ff;
		border-radius: 40rpx;
		border: 0;
		color: #fff;

		&.u-hairline-border:after {
			border: 0;
		}
	}

	// .jq{
	// 	color: #0D1D36;
	// 	font-size: 50rpx;
	// 	font-weight: bold;
	// 	margin-left: 256rpx;
	// 	margin-top: 160rpx;
	// }
	.qpthb {
		margin-top: -400rpx;
		width: 710rpx;
		height: 770rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
	}
</style>
